<template>
  <div class="business-root">
    <div class="white-card detail-">
      <div class="title-h1 flex" @click="showPopup = true">
        <img class="icon" src="~@/assets/imgs/businessLine/发展.png" />
        <span class="text-">{{ currentItem.chnl_name }}</span>
        <van-icon name="play" />
      </div>
      <!-- <van-loading v-if="loading" type="spinner" color="#1989fa" /> -->
      <div class="cards-3">
        <div v-for="(item, idx) in dataConfig" :class="`card card${idx}`" :key="idx">
          <div class="main">
            <div class="flex">
              <img class="icon-" :src="require(`../../../../../../../assets/imgs/reconsitution/${item.icon}.png`)" />
              <div class="title- bold">{{ item.title }}</div>
            </div>
            <div class="k- k-top">当日值/目标值</div>
            <div
              class="v- bold"
              :class="{ 'num-underline': Number(currentItem[dataModel[item.model]]) > 0 }"
              @click="
                $emit('openDialog', {
                  num: currentItem[dataModel[item.model]],
                  clickType: item.model === 'zjcptotal' ? 'zjcp' : 'normal',
                  params: { kpiCode: item.kpiCode, chnlId: currentItem.chnl_id },
                })
              "
            >
              {{ currentItem[dataModel[item.model]] || 0 }}
            </div>
          </div>
          <div class="kv-s">
            <template v-for="(ite, idx) in item.list">
              <div :key="idx + 'li'" class="flex flex-between">
                <div class="k-">{{ ite.label }}</div>
                <div
                  :class="{ 'num-underline': Number(currentItem[dataModel[ite.model]]) > 0 }"
                  @click="
                    $emit('openDialog', {
                      num: currentItem[dataModel[ite.model]],
                      clickType: item.model === 'zjcptotal' ? 'zjcp' : 'normal',
                      params: { kpiCode: ite.kpiCode, chnlId: currentItem.chnl_id },
                    })
                  "
                >
                  {{ currentItem[dataModel[ite.model]] || 0 }}/{{ currentItem[dataModel[ite.mbModel]] || 0 }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model="showPopup" position="bottom">
      <van-picker
        show-toolbar
        title="请选择营业厅"
        :columns="columns"
        :default-index="currentItemIndex"
        @confirm="onConfirm"
        @cancel="showPopup = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { _ywsjListV2, _kdListV2, _zjcpIPTVListV2 } from '../../common'
const _config = [
  {
    title: '移网手机',
    model: 'ywsjtotal',
    icon: 'fz_ywsj',
    list: _ywsjListV2,
    kpiCode: 'YW_0008',
  },
  {
    title: '宽带',
    model: 'kdtotal',
    icon: 'fz_kd',
    list: _kdListV2,
    kpiCode: 'KD_0008',
  },
  {
    title: '智家产品',
    model: 'zjcptotal',
    icon: 'fz_kd',
    list: _zjcpIPTVListV2,
    kpiCode: 'ZJ_0001',
  },
]
export default {
  name: 'GdwyyAppYytmx',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    dataModel: {
      type: Object,
      default: () => {
        return {}
      },
    },
    loading: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dataConfig: _config,
      currentItem: {},
      showPopup: false,
      currentItemIndex: 0,
    }
  },

  watch: {
    data: {
      immediate: true,
      handler(nv) {
        if (!nv.length) return
        this.currentItem = nv[0]
      },
    },
  },
  computed: {
    columns() {
      return this.data.map((item) => {
        return item.chnl_name
      })
    },
  },

  methods: {
    onConfirm(value, index) {
      this.currentItem = this.data[index]
      this.showPopup = false
      this.$emit('changeYyt', [this.currentItem])
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.num-underline {
  text-decoration: underline;
}
.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.center {
  justify-content: center;
  text-align: center;
  align-items: center;
}

.business-root {
  padding: 0 2.1333vw;

  .white-card {
    background-color: #fff;
    border-radius: 1.6vw;
    padding: 3.2vw 2.1333vw;
  }

  .detail- {
    border-bottom: 0.2667vw dashed rgba(77, 152, 255, 0.4);

    .title-h1 {
      font-size: 4.5333vw;
      color: #333333;
      letter-spacing: -0.16vw;
      font-weight: bold;
      align-items: center;

      .icon {
        width: 4.2667vw;
        height: 4.2667vw;
      }

      .text- {
        padding: 0 2.6667vw 0 1.8667vw;
      }

      ::v-deep .van-icon-play {
        transform: rotate(90deg);
        color: #aaaaaa;
      }
    }

    .cards-3 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.6667vw;
      margin-top: 3.2vw;

      .title- {
        line-height: 5.3333vw;
        margin-left: 2.1333vw;
        font-size: 3.7333vw;
        color: #333333;
        letter-spacing: -0.0427vw;
      }

      .icon- {
        width: 3.7333vw;
        height: 3.7333vw;
      }

      .k- {
        font-size: 3.2vw;
        color: #999999;
        letter-spacing: -0.0373vw;
        line-height: 4.5333vw;
      }

      .main .k- {
        margin-top: 1.6vw;
      }

      .v- {
        font-size: 6.4vw;
        color: #4d98ff;
        letter-spacing: -0.0747vw;
        line-height: 8.8vw;
        margin-bottom: 4.2667vw;
      }

      .card {
        flex: 1;
        padding: 3.2vw 2.6667vw 1.3333vw;
        background-size: 100% 100%;

        .kv-s {
          display: grid;
          line-height: 4.5333vw;

          .k- {
            position: relative;
            padding-left: 2.6667vw;

            &::before {
              position: absolute;
              content: '';
              border: 0.2667vw solid #4d98ff;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 1.0667vw;
              height: 1.0667vw;
              border-radius: 1.0667vw;
              box-sizing: border-box;
            }
          }
        }
      }

      .card0,
      .card1 {
        background-image: url('~@assets/imgs/businessLine/yyx_zbcard1.png');

        .kv-s {
          row-gap: 1.8667vw;
        }
      }

      .card2 {
        grid-column: span 2;
        display: flex;
        background-image: url('~@assets/imgs/businessLine/yyx_zbcard2.png');

        .main {
          width: 47.2vw;

          .v- {
            margin-bottom: unset;
          }
        }

        .k-top {
          margin-top: 4.5333vw;
        }

        .kv-s {
          row-gap: 2.1333vw;
          flex: 1;
        }
      }
    }
  }
}
</style>